// 对话框弹窗 dialogState: 弹窗状态 Boolean
<template>
  <a-modal
    class="custom-options-dialog-box"
    :wrap-class-name="dialogClass"
    :title="dialogTitle"
    :class="iconType"
    :visible="dialogState"
    :width="dialogWidth"
    :mask-closable="true"
    :z-index="dialogIndex"
    @cancel="handleCancel(false)"
  >
    <div v-if="iconType === 'default'" class="custom-content">
      <slot name="location"></slot>
    </div>
    <div v-else class="content">
      <i v-if="showIcon" :class="'icon-' + iconType" class="icon"></i>
      <span class="text">{{ contentText }}</span>
    </div>
    <template v-slot:footer>
      <div :class="draftBoxVisible ? 'footer' : 'footers'">
        <a-button v-if="showCancel" class="bg-color-white btn-cancel" @click="handleCancel(false)"
          >取消</a-button
        >
        <a-button
          type="primary"
          :loading="btnLoading"
          :disabled="disabled"
          @click="handleOk(false)"
          >{{ btnState }}</a-button
        >
      </div>
    </template>
  </a-modal>
</template>

<script>
// import { inject } from 'vue';
// import { inject } from '@vue/composition-api';
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    dialogState: Boolean, // 弹窗状态
    disabled: Boolean,
    draftBoxVisible: Boolean, // 是否显示加入草稿箱
    dialogTitle: String, // 弹窗标题
    showIcon: Boolean, // 是否显示图标
    iconType: String, // 警告图标  default: 自定义内容； warring：警告； success：成功
    contentText: String, // 弹窗内容
    dialogWidth: String, // 弹窗宽度
    showCancel: Boolean, // 是否显示取消按钮，false表示不显示
    btnState: {
      // 确定 按钮状态
      type: String,
      default: '确定'
    },
    btnLoading: {
      type: Boolean,
      default: false
    },
    dialogIndex: {
      type: Number,
      default: 1000
    },
    dialogClass: {
      // class名称
      type: String,
      default: ''
    }
  },
  emits: {
    // putDraftBox: null, // 加入草稿箱
    handleOk: null, // 确定事件
    handleCancel: null // 取消事件
  },
  setup(props, context) {
    function handleCancel(state) {
      console.log(333);
      context.emit('handleCancel', state);
    }
    function handleOk(state) {
      context.emit('handleOk', state);
    }
    // function putDraftBox() {
    //   context.emit('putDraftBox');
    // }
    return {
      handleCancel,
      handleOk
      // putDraftBox
    };
  }
});
</script>
<style lang="less" scoped>
/deep/ .micro-dormitory-modal-header {
  border-bottom: 1px solid #fff !important;
  // background: #f00 !important;
}
.micro-dormitory-modal-body {
  padding: 0 !important;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: @color-test;
  cursor: pointer;
  font-size: 14px;
}
.footers {
  display: flex;
  justify-content: flex-end;
}
.content {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 16px;
  height: 48px;
  background: rgba(247, 238, 221, 0.25);
  border-radius: 4px;
}
.icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 5px 10px 0 0;
}
/deep/.micro-dormitory-btn-primary:hover,
/deep/.micro-dormitory-btn-primary:focus {
  color: #fff;
}
// /deep/.micro-dormitory-btn-background-ghost:hover,
// /deep/.micro-dormitory-btn-background-ghost:focus {
//   color: #var(--primaryColor) !important;
// }
// .icon-success {
//   background: url('../../assets/icons/images/message_icon_success.png') no-repeat center;
//   background-size: 100% 100%;
// }
// .icon-error {
//   background: url('../../assets/icons/images/message_icon_fail.png') no-repeat center;
//   background-size: 100% 100%;
// }
// .icon-system {
//   background: url('../../assets/icons/images/message_icon_success.png') no-repeat center;
//   background-size: 100% 100%;
// }
// .icon-warring {
//   background: url('../../assets/icons/images/exclamation_icon_circle.png') no-repeat center;
//   background-size: 100% 100%;
// }
</style>
<style>
.room-info-new .micro-dormitory-modal-title {
  padding-right: 20px;
}
</style>
